<template>
	<el-collapse v-model="activeNames" style="width: 100%">
		<el-collapse-item v-for="item in groups['rule'].sort((a, b) => a.order - b.order)" :name="item.name">
			<template #title> <SvgIconN :name="item.icon" />{{ item.name }} </template>
			<div class="module_panel" style="padding: 5px">
				<el-popover
					v-for="(baseNode, index) in item.components"
					effect="dark"
					:content="baseNode.content"
					:width="200"
					:title="baseNode.text"
					trigger="hover"
					placement="right"
				>
					<template #reference>
						<div class="item_flex" @mousedown="dragInNode(baseNode)">
							<div class="item_icon"><SvgIconN :name="baseNode.icon" :size="35" className="ccc" /></div>
							<div class="item_text">{{ baseNode.text }}</div>
						</div>
					</template>
				</el-popover>
			</div>
		</el-collapse-item>
	</el-collapse>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue';
import { getNodeUUid } from '../../../../../utils/util';
import SvgIconN from '../../../../../components/component/SvgIcon/index.vue';

const emit = defineEmits(['dragInNode']);

const groups = inject('groups');

const activeNames = ref(['基础组件']);

const dragInNode = (item: any) => {
	let uuid = getNodeUUid();
	emit('dragInNode', {
		id: uuid,
		type: item.type,
		text: item.text,
	});
};
</script>
<style scoped></style>
